<template>
  <view class="myInviteTeachers-page">
    <head-box></head-box>

    <view class="myInviteTeachers-page-main">
      <view class="myInviteTeachers-page-main-item" v-for="(item, index) in list" :key="index">
        <view class="myInviteTeachers-page-main-item-header">
          <view class="_item-header-title"
            ><text>名师:{{ item.name }}</text></view
          >
        </view>

        <view class="myInviteTeachers-page-main-item-content">
          <view class="myInviteTeachers-page-main-item-content-inner">
            <view class="_content-inner-img"
              ><image class="_img" :src="item.icon" mode="aspectFit"></image
            ></view>
            <view class="_content-inner-detail">
              <view class="_content-inner-detail-item">
                <view class="_content-inner-detail-item-badge" v-if="0">
                  <text class="_content-inner-detail-item-badge-text">优秀教师</text>
                  <text class="_content-inner-detail-item-badge-text">一级救护员</text>
                </view>
                <view class="_content-inner-detail-item-info">
                  <text>
                    <rich-text class="mian_body" :nodes="item.content"></rich-text>
                  </text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="myInviteTeachers-page-main-item-bottom">
          <view class="myInviteTeachers-page-main-item-bottom-text myInviteTeachers-page-main-item-bottom-text1"
          ><text>上课地点：{{ item.address }}</text></view
          >
        </view>
        <view class="myInviteTeachers-page-main-item-bottom">
          <view class="myInviteTeachers-page-main-item-bottom-text"
            ><text>邀请时间：{{ item.startUseTime | startUseTime(that) }}</text></view>
          <view class="myInviteTeachers-page-main-item-bottom-text"
            ><text>{{ getStatus[index] }}</text></view>
        </view>
      </view>
      <u-loadmore :status="status" :icon-type="iconType" @loadmore="loadmore" />
    </view>

    <tabs-box></tabs-box>
  </view>
</template>

<script>
  import { group1 } from '@/mixins/group-1'
  import { gptRunResourcesApplyList } from '@/api/resources'
  export default {
    mixins: [group1],
    filters: {
      startUseTime(m, self) {
        if (self.$moment(m).format('yyyy-MM-dd HH:mm:ss') === 'Invalid date') {
          return '暂无上课时间'
        }
        return self.$moment(m).format('yyyy-MM-DD HH:mm')
      },
    },
    data() {
      return {
        that: this,
      }
    },
    onLoad() {},
    onShow(){
      // #ifdef H5
      console.log('分享')
      this.$wxSetShare()
      // #endif
    },
    computed: {
      //预约状态
      getStatus() {
        return this.list.map((item) => {
          const { status } = item
          return {
            1: '待处理',
            2: '已处理',
            3: '已处理',
          }[status]
        })
      },
    },
    methods: {
      //我的名师邀请资源列表
      async getList() {
        const params = { pageNo: this.pageNo, pageSize: 10, baseType: 4 }
        await this.getLists(gptRunResourcesApplyList, params)
      },
    },
  }
</script>

<style lang="scss">
  .myInviteTeachers-page {
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 200rpx;
    //background-color: #efeff4;
    line-height: 42rpx;
    .top-fixed {
      position: fixed;
      top: 0;
      z-index: 1;
    }
    .top {
      width: 100%;
      height: 100rpx;
      padding: 0 30rpx;
      // background-color: #007AFF;
      background-color: #f7f7f7;
      box-shadow: 0 1px 6rpx #ccc;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      .top-text {
        color: #000;
        font-size: 34rpx;
      }
    }
    .top-box {
      width: 100%;
      height: 100%;
      position: relative;
      text-align: center;
      line-height: 100rpx;
      .back-img {
        width: 44rpx;
        height: 40rpx;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        margin-left: 0rpx;
      }
    }
    .myInviteTeachers-page-main {
      width: 100%;
      padding: 30rpx 20rpx 0;
      box-sizing: border-box;
      .myInviteTeachers-page-main-item {
        width: 100%;
        border-radius: 4rpx;
        background-color: white;
        background-clip: padding-box;
        box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
        margin-bottom: 30rpx;
        .myInviteTeachers-page-main-item-header {
          position: relative;
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          min-height: 88rpx;
          padding: 20rpx 30rpx;
          box-sizing: border-box;
          -webkit-box-pack: justify;
          -webkit-justify-content: space-between;
          justify-content: space-between;
          -webkit-box-align: center;
          -webkit-align-items: center;
          align-items: center;
          font-size: 34rpx;
          border-radius: 4rpx 4rpx 0 0;
          border-bottom: 1px solid rgba(200, 199, 204, 0.5);
          ._item-header-title {
          }
        }
        .myInviteTeachers-page-main-item-content {
          font-size: 28rpx;
          position: relative;
          .myInviteTeachers-page-main-item-content-inner {
            position: relative;
            padding: 30rpx;
            box-sizing: border-box;
            display: flex;
            flex-wrap: nowrap;
            justify-content: flex-start;
            ._content-inner-img {
              width: 160rpx;
              height: 190rpx;
              border-radius: 10rpx;
              ._img {
                width: 100%;
                height: 100%;
                border-radius: 10rpx;
              }
            }
            ._content-inner-detail {
              width: calc(100% - 160rpx);
              ._content-inner-detail-item {
                ._content-inner-detail-item-badge {
                  margin-left: 20rpx;
                  ._content-inner-detail-item-badge-text {
                    margin: 0 10rpx;
                    font-size: 24rpx;
                    padding: 10rpx 20rpx;
                    background-color: #f0ad4e;
                    color: #fff;
                    border-radius: 40rpx;
                    box-sizing: border-box;
                  }
                }
                ._content-inner-detail-item-info {
                  text-indent: 2em;
                  padding: 20rpx 0 0 20rpx;
                  box-sizing: border-box;
                }
              }
            }
          }
        }
        .myInviteTeachers-page-main-item-bottom {
          position: relative;
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          min-height: 88rpx;
          padding: 20rpx 30rpx;
          box-sizing: border-box;
          -webkit-box-pack: justify;
          -webkit-justify-content: space-between;
          justify-content: space-between;
          -webkit-box-align: center;
          -webkit-align-items: center;
          align-items: center;
          border-top: 1px solid rgba(200, 199, 204, 0.5);

          .myInviteTeachers-page-main-item-bottom-text {
            color: #6d6d72;
            border-radius: 0 0 4rpx 4rpx;
            font-size: 28rpx;


          }
          .myInviteTeachers-page-main-item-bottom-text1{
            line-break: anywhere;
            width: 100%;
            white-space: pre-line;
          }
        }
      }
    }
  }
</style>
